<!DOCTYPE html>
<html lang="en">
<%
layout("/common/_body.html",{title:'驾驶舱'}){
%>
<body>
<!-- 页面头部 -->
<div class="header">
    <div class="header_wrap">
        <div class="header_lt">
            <h3>武汉市森林公安大数据平台</h3>
        </div>
        <%
        layout("/common/_bar.html"){}
        %>
    </div>
</div>
<!-- 中间区域 -->
<div class="main indexBg">
    <div class="cockpit_wrap clearfix">
         <!--野生动物-->
         <div class="cockpit_lt">
             <div class="chatBox">
                 <h3 class="h3_title clearfix">
                     <a href="#" class="nav_icont fr"></a>
                     <span class="nav_title">野生动物种类</span>
                 </h3>
                 <div id="chart01" class="charth"></div>
             </div>
             <div class="chatBox">
                 <h3 class="h3_title"><span class="nav_title">野生动物数量</span></h3>
                 <div id="chart03" class="charth"></div>
             </div>
             <div class="chatBox">
                 <h3 class="h3_title"><span class="nav_title">数量稀少动物</span></h3>
                 <div id="chart05" class="charth"></div>
             </div>
         </div>
         <div class="cockpit_cent">
             <div class="chatWrap">
                 <div class="chat_head">
                     <h3 class="h3_title"><span class="nav_title">11月数据统计</span></h3>
                     <ul class="chatHead_list clearfix">
                         <li><p>滥砍滥伐次数</p><div class="redColor">2</div></li>
                         <li><p>森林火灾次数</p><div class="greenColor">0</div></li>
                         <li><p>木材偷运次数</p><div class="yellowColor">1</div></li>
                     </ul>
                 </div>
                 <div class="chat_head">
                     <h3 class="h3_title"><span class="nav_title">损坏面积走向</span></h3>
                     <div id="chart07" class="chartd"></div>
                     <div class="chart_line"><a class="chart_btn" href="/web/plan">无人机面积测量</a></div>
                 </div>
             </div>
             <div class="chatItem">
                 <div class="chatItem_wrap clearfix">
                     <div class="chatItem_box">
                         <h3 class="h3_notice">通知公告</h3>
                         <ul class="itemBox_list">
                                <%
                                   if(isNotEmpty(n1)){
                                        for(n in n1){
                                        var c= strutil.replace(n.updateTime+'','T',' ');
                                    %>
                                       <li><a href="#"><span class="text">${n.title!}</span> <span class="time">${c!}</span></a></li>

                                    <%}

                                    }
                                %>
                         </ul>
                     </div>
                     <div class="chatItem_box">
                         <h3 class="h3_system">系统升级</h3>
                         <ul class="itemBox_list">
                             <%
                             if(isNotEmpty(n2)){
                             for(n in n2){
                             var c= strutil.replace(n.updateTime+'','T',' ');
                             %>
                             <li><a href="#"><span class="text">${n.title!}</span> <span class="time">${c!}</span></a></li>

                             <%}

                             }
                             %>
                         </ul>
                     </div>
                 </div>
             </div>
         </div>
        <!--野生植物-->
         <div class="cockpit_rt">
             <div class="chatBox">
                 <h3 class="h3_title clearfix">
                     <a href="#" class="nav_icont fr"></a>
                     <span class="nav_title">野生植物种类</span>
                 </h3>
                 <div id="chart02" class="charth"></div>
             </div>
             <div class="chatBox">
                 <h3 class="h3_title"><span class="nav_title">野生植物数量</span></h3>
                 <div id="chart04" class="charth"></div>
             </div>
             <div class="chatBox">
                 <h3 class="h3_title"><span class="nav_title">数量稀少植物</span></h3>
                 <div id="chart06" class="charth"></div>
             </div>
         </div>
    </div>
    <div class="video_wrap">
        <div class="banImg_wrap">
            <div class="vedio_Box">
                <ul class="vedio_list clearfix">
                    <li>
                        <div class="vdeio_bg" style="background-image: url(/static/img/loginBg.png)"><span class="play_btn"></span></div>
                        <p>滥砍滥伐管理</p>
                    </li>
                    <li>
                        <div class="vdeio_bg" style="background-image: url(/static/img/loginBg.png)"><span class="play_btn"></span></div>
                        <p>森林防火预警</p>
                    </li>
                    <li>
                        <div class="vdeio_bg" style="background-image: url(/static/img/loginBg.png)"><span class="play_btn"></span></div>
                        <p>木材偷运管理</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 页面底部 -->
<div class="footer">
    <div class="footer_wrap">武汉市森林公安局版权所有</div>
</div>
<%}%>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script language="javascript">
    var myChart1 = echarts.init(document.getElementById('chart01'));
    var option1 = {
        title:{
            show:"true",//是否显示标题，默认显示，可以不设置
            text:"单位：种",//图表标题文本内容
            textStyle:{//标题内容的样式
                color:'#fff',
                fontStyle:'normal',
                fontWeight:'normal',
                fontSize:10,
            },
            left:50,
            top:0,
        },
        grid:{
            x:50,
            y:20,
            x2:50,
            y2:20,
            borderWidth:1
        },
        xAxis: {
            data: ["一级保护","二级保护","三级保护"],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width:'1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
            }
        },
        yAxis: {
            splitLine:{show: false},//去除网格线
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width:'1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
            }
        },
        series: [{
            name: '野生动物种类',
            type: 'bar',
            barWidth: '20px',
            data: [${param1.a1!0},${param1.a2!0},${param1.a3!0}],
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#CA3232','#2BA727','#CBBA22'];
                        return colorList[params.dataIndex]
                    },
                    label : {
                        show:true,
                        position:'top',
                        formatter:'{c}',
                        textStyle: {color:'#fff'}
                    }
                }
            }
        }]
    };
    myChart1.setOption(option1);

    var myChart2 = echarts.init(document.getElementById('chart02'));
    var option2 = {
        title:{
            show:"true",//是否显示标题，默认显示，可以不设置
            text:"单位：种",//图表标题文本内容
            textStyle:{//标题内容的样式
                color:'#fff',
                fontStyle:'normal',
                fontWeight:'normal',
                fontSize:10,
            },
            left:50,
            top:0,
        },
        grid:{
            x:50,
            y:20,
            x2:50,
            y2:20,
            borderWidth:1
        },
//        tooltip: {
//            formatter: "占比:{c}%",
//            show: true
//        },
        xAxis: {
            data: ["一级保护","二级保护","三级保护"],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width:'1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
            }
        },
        yAxis: {
            splitLine:{show: false},//去除网格线
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width:'1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                }
            }
        },
        series: [{
            name: '野生植物种类',
            type: 'bar',
            barWidth: '20px',
            data: [${param1.p1!0},${param1.p2!0},${param1.p3!0}],
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#CA3232','#2BA727','#CBBA22'];
                        return colorList[params.dataIndex]
                    },
                    label : {
                        show:true,
                        position:'top',
                        formatter:'{c}',
                        textStyle: {color:'#fff'}
                    }
                }
            }
        }]
    };
    myChart2.setOption(option2);

    var myChart3 = echarts.init(document.getElementById('chart03'));
    option3 = {
        grid:{
            x:50,
            y:20,
            x2:50,
            y2:20,
            borderWidth:1
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} <br/>{a} : {c} (占总比{d}%)"
        },
        series : [
            {
                color:['#CA3232','#2BA727','#CBBA22'],
                name: '数量',
                type: 'pie',
                radius : '60%',
                center: ['50%', '50%'],
                data:[
                    {value:${param.a1!0}, name:'一级保护动物'},
                    {value:${param.a2!0}, name:'二级保护动物'},
                    {value:${param.a3!0}, name:'三级保护动物'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart3.setOption(option3);

    var myChart4 = echarts.init(document.getElementById('chart04'));
    option4 = {
        grid:{
            x:50,
            y:20,
            x2:50,
            y2:20,
            borderWidth:1
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b} <br/>{a} : {c} (占总比{d}%)"
        },
        series : [
            {
                color:['#CA3232','#2BA727','#CBBA22'],
                name: '数量',
                type: 'pie',
                radius : '60%',
                center: ['50%', '50%'],
                data:[
                    {value:${param.p1!0}, name:'一级保护植物'},
                    {value:${param.p2!0}, name:'二级保护植物'},
                    {value:${param.p3!0}, name:'三级保护植物'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart4.setOption(option4);

    var myChart5 = echarts.init(document.getElementById('chart05'));



    var data5=[
        <% if(isNotEmpty(animal)){
                for(var a in animal){   %>
                {value:${a.num!0}, name:'${a.name!}'},
                 <%}}%>

    ],
    option5 = {
        tooltip: {
            trigger: 'item',
            formatter: "{b} <br/>{a}: {c} (占总比{d}%)"
        },
        series: [
            {
                color:['#c93231', '#cab929', '#28a62b', '#c89217', '#1870d5'],
                name: '数量',
                type:'pie',
                radius: ['45%', '65%'],
                center: ['30%', '50%'],
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:data5,
            }
        ],
        legend: {
            orient: 'vertical',
            itemWidth: 8,
            itemHeight: 8,
            right: '10%',
            top:'10%',
            data:[
            <% if(isNotEmpty(animal)){
        for(var a in animal){   %>
         '${a.name!}',
        <%}}%>
            ],
            formatter: function(name){
                for (var i = 0; i < data5.length; i++) {
                    if (data5[i].name == name) {
                        return name+'：'+data5[i].value+' 只'
                    }
                }
            },
            textStyle: {
                fontSize: 10,
                color: '#fff'
            }
        },
    };
    myChart5.setOption(option5);

    var myChart6 = echarts.init(document.getElementById('chart06'));
    var data6=[
        <% if(isNotEmpty(palnt)){
        for(var a in palnt){   %>
            {value:${a.num!0}, name:'${a.name!}'},
        <%}}%>
        ],
    option6 = {
        tooltip: {
            trigger: 'item',
            formatter: "{b} <br/>{a}: {c} (占总比{d}%)"
        },
        legend: {
            orient: 'vertical',
            itemWidth: 8,
            itemHeight: 8,
            right: '10%',
            data:[
            <% if(isNotEmpty(palnt)){
        for(var a in palnt){   %>
            '${a.name!}',
        <%}}%>
            ],
            formatter: function(name){
                for (var i = 0; i < data6.length; i++) {
                    if (data6[i].name == name) {
                        return name+'：'+data6[i].value+' 只'
                    }
                }
            },
            textStyle: {
                fontSize: 10,
                color: '#fff'
            }
        },
        series: [
            {
                color:['#c93231', '#cab929', '#28a62b', '#c89217', '#1870d5'],
                name: '数量',
                type:'pie',
                radius: ['45%', '65%'],
                center: ['30%', '50%'],
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:data6
            }
        ]
    };
    myChart6.setOption(option6);

    var myChart7 = echarts.init(document.getElementById('chart07'));
    option7 = {
        color: ['#FFDB00'],
        grid:{
            x:50,
            y:20,
            x2:50,
            y2:40,
            borderWidth:1
        },
//        dataZoom: [{
//            type: 'inside'
//        }, {
//            type: 'slider'
//        }],
        tooltip: {
            formatter: "{c}",
            show: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2018.09','2018.10','2018.11','2018.12','2019.01','2019.02','2019.03','2019.04'],
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width:'1'//坐标线的宽度
                },
                axisTick:{
                    show:false
                }
            },
            axisLabel: {
                interval:0,
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                    fontSize: 10,
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine:{ show: false},//去除网格线
            axisLine: {
                lineStyle: {
                    type: 'solid',
                    color: '#196567',//左边线的颜色
                    width:'1'//坐标线的宽度
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#fff',//坐标值得具体的颜色
                    fontSize: 10,
                }
            }
        },
        series: [{
            data: [0,250,320,380,400,300,200,100],
            type: 'line',
            itemStyle: {
                normal: {   //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 0, color: '#feda19' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5f7526' // 100% 处的颜色
                        }]
                    ), //背景渐变色
                },
            },
            areaStyle: {
                normal: {
                    label : {
                        show:true,
                        position:'top',
                        formatter:'{c} %',
                        textStyle: {color:'#000'}
                    }
                }
            }
        }]
    };
    myChart7.setOption(option7);

</script>

</body>
</html>
